<template>
	<view class="">
		<view class="pr" style="height: 100vh" v-if="Loading">
			<ourLoading :active="Loading" translateY="50" color="#48A147" background-color="white" size="4">
			</ourLoading>
		</view>
		<view class="top-box">
			<u-navbar :is-back="false" :background="background" :border-bottom="false">
				<view class="df aic" style="width: 90%">
					<view class="address app-theme mr30 ml30 df aic" v-if="!TOKEN" @click="handleAddress">
						<nmr-icon name="dingwei-2" color="#48A147" class="mr10"></nmr-icon>
						<view class="u-line-1" style="width: 160rpx"> 未登录 </view>
					</view>
					<view class="address app-theme mr30 ml30 df aic" v-else="TOKEN" @click="handleAddress">
						<nmr-icon name="dingwei-2" color="#48A147" class="mr10"></nmr-icon>
						<view class="u-line-1" style="width: 160rpx">
							{{ LOCATION.name || "未选择地址" }}
						</view>
					</view>
					<view class="search fs24 c9 df aic" @click="handleSearch">
						<u-icon name="search" color="#999999" class="mr10"></u-icon>
						<view class="u-line-1" style="width: 150rpx">请检索商品名</view>
					</view>
				</view>
			</u-navbar>
			<CategoryModule v-if="subjectList.length" ref="CategoryModule" @change="changeSubject"
				:subjectList="subjectList"></CategoryModule>
		</view>
		<view v-if="subjectList.length == 0" class="df aic jcc" style="flex-direction: column; width: 100%"
			:style="{ height: warpperHeightRight + 'px' }">
			<image src="@/static/empty/store-empty.png" style="width: 428rpx; height: 360rpx" mode="widthFix"></image>
			<view class="c9 fs28 mt30"> 暂无分类 </view>
		</view>
		<ScrollViewContent v-if="subjectList.length" @changeCarList="changeCarList" :cartList="goodsCarList"
			@handleLogin="handleLogin" ref="ScrollViewContent" :warpperHeightRight="warpperHeightRight"
			:bannerList="bannerList" :warpperHeight="warpperHeight"></ScrollViewContent>
		<LoginPopup @loginSuccess="loginSuccess" ref="LoginPopup"></LoginPopup>
	</view>
</template>

<script>
	import {
		bannerCode
	} from "@/api/common.js";
	import ourLoading from "@/components/our-loading/our-loading.vue";
	import CategoryModule from "./components/CategoryModule.vue";
	import ScrollViewContent from "./components/ScrollViewContent.vue";
	import {
		queryTopBSubjectList
	} from "@/api/goods.js";
	export default {
		components: {
			CategoryModule,
			ScrollViewContent,
			ourLoading,
		},
		data() {
			return {
				background: {
					background: "transparent",
				},
				warpperHeight: 1000,
				warpperHeightRight: 1000,
				showSku: false,
				subjectList: [],
				token: "",
				Loading: true,
				bannerList: [],
				goodsCarList: [],
				firstCateId: 0,
			};
		},

		onLoad(e) {
			if (uni.getStorageSync("firstCateId")) {
				this.firstCateId = uni.getStorageSync("firstCateId");
				uni.removeStorageSync("firstCateId");
			} else {
				this.firstCateId = 0;
			}
		},
		async onShow() {
			await this.queryTopBSubjectList();


			this.goodsCarList = uni.getStorageSync("CARGOODLIST");
			this.$nextTick(() => {
				let pages = getCurrentPages()
				if (pages.length >= 1) {
					let prevpage = pages[0].__displayReporter.showReferpagepath
					if (prevpage !== 'pages/goods/detail.html') {
						let i = this.$refs.ScrollViewContent.currentSubject
						this.$refs.ScrollViewContent.currentSubject = 99999
						this.$refs.ScrollViewContent.swichMenuThree(i);
					}
				}

				this.$refs.ScrollViewContent.clacGoodsSet();
			});

			// onHide() {
			// 	this.$u.vuex('CARGOODLIST', JSON.parse(JSON.stringify(this.goodsCarList)))
			// },
			// onUnload() {
			// 	this.$u.vuex('CARGOODLIST', JSON.parse(JSON.stringify(this.goodsCarList)))
			// },
		},
		methods: {
			changeCarList(e) {
				this.goodsCarList = e;
				uni.setStorageSync("CARGOODLIST", this.goodsCarList);
				// this.$u.vuex('CARGOODLIST', JSON.parse(JSON.stringify(this.goodsCarList)))
				let num = this.$common.clacCount(e);
				if (num == 0) {
					uni.removeTabBarBadge({
						index: 3,
					});
				} else {
					uni.setTabBarBadge({
						index: 3,
						text: num,
					});
				}
			},
			changeSubject(e) {
				this.firstCateId = this.subjectList[e].subjectId;
				if (
					this.$refs.ScrollViewContent.logingSubject ||
					this.$refs.ScrollViewContent.loadStatus == "loading"
				)
					return;
				this.$refs.ScrollViewContent.getMenuHandle(this.subjectList[e].subjectId);
				this.$refs.CategoryModule.changeDone(e);
			},
			handleSearch() {
				uni.navigateTo({
					url: "/pages/search/index",
				});
			},
			bannerCode() {
				bannerCode({
					bannerCode: "b_class_banner",
				}).then((res) => {
					this.bannerList = res.data;
					console.log(this.bannerList.length);
					if (this.bannerList.length) {
						this.warpperHeightRight = this.warpperHeightRight - uni.upx2px(110);
					}
				});
			},
			handleAddress() {
				if (this.TOKEN) {
					uni.navigateTo({
						url: "/pages/addressLocation",
					});
				} else {
					this.$refs.LoginPopup.checkLogin();
				}
			},
			handleLogin() {
				this.$refs.LoginPopup.checkLogin();
			},
			checkSubject() {

				this.$nextTick(() => {
					console.log("this.firstCateId", this.firstCateId);
					if (this.firstCateId) {
						let index = this.subjectList.findIndex(
							(item) => item.subjectId == this.firstCateId
						);
						this.$refs.ScrollViewContent.getMenuHandle(this.firstCateId);
						this.$refs.CategoryModule.changeDone(index);
					} else {
						this.changeSubject(0);
						this.$refs.ScrollViewContent.getMenuHandle(
							this.subjectList[0].subjectId
						);
					}
					this.Loading = false;
				});
			},
			queryTopBSubjectList(groupType) {
				if (this.subjectList.length) {
					this.checkSubject();
				} else {
					queryTopBSubjectList({
							level: 1,
							isShowB: 0,
						})
						.then((res) => {
							this.subjectList = res;
							if (res.length) {
								this.checkSubject();
							} else {
								this.Loading = false;
							}
							if (res.code == 200) {} else {
								uni.showToast({
									title: res.msg,
									icon: "none",
									mask: true,
								});
							}
						})
						.catch(() => {
							this.Loading = false;
						});
				}
			},
		},
		async mounted() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.warpperHeight =
						res.windowHeight -
						res.statusBarHeight -
						uni.upx2px(110 * 2) -
						(res.platform == "ios" ? 44 : 48);
					that.warpperHeightRight = that.warpperHeight - uni.upx2px(42 * 2);
					that.bannerCode();
				},
			});
		},
	};
</script>

<style lang="scss" scoped>
	.top-box {
		// background: linear-gradient(180deg, #ECFFEB 0%, #FFF4F0 100%);
		background-image: url("../../static/kind-bg.png");
		background-size: 100%;
	}

	.address {}

	.search {
		width: 100%;
		height: 58rpx;
		background: #ffffff;
		border-radius: 38rpx 38rpx 38rpx 38rpx;
		opacity: 1;
		border: 1rpx solid #48a147;
		padding: 13rpx 30rpx;
	}
</style>